<!-- <template>
  <div class="box">
    <span>菜品类目</span>
    <div class="buttom">
      <el-button type="success" size="medium" @click="open">添加类目</el-button>
    </div> -->
    <!-- 主体部分 -->
    <!-- <div class="subject" v-if="nodatas"> -->
      <!-- 表头 -->
      <!-- <div class="header">
        <span v-for="(item, index) in tablist" :key="index">{{ item }}</span>
      </div> -->
      <!-- 表格 -->
      <!-- <div class="table" v-for="(item, index) in tabcont" :key="index">
        <div>{{ item.cid }}</div>
        <div>{{ item.label }}</div>
      </div>
    </div> -->
    <!-- 没有数据 -->
    <!-- <div class="non-vegetable" v-else>还没有菜品哦！</div> -->
    <!-- 分页 -->
    <!-- current-page 当前页数，支持 .sync 修饰符 -->
    <!-- layout 组件布局，子组件名用逗号分隔 -->
    <!-- hide-on-single-page 只有一页时是否隐藏	 -->
    <!-- background  是否为分页按钮添加背景色	 -->
    <!-- total 总条目数	 -->
    <!-- current-change:currentPage 改变时会触发	 -->
    <!-- <el-pagination background layout="prev, pager, next" :total="total" :current-page="currentnum"
      :hide-on-single-page="true" @current-change="currentchange">
    </el-pagination>
  </div>
</template> -->

<!-- <script>
export default {
  data() {
    return {
      loading: false,
      nodatas: true,
      tablist: ["类目ID", "类目"],
      tabcont: [],
      currentnum: 0, // 当前页数
      total: 0, // 总条数
      pagenum: 0, // 分页的页数
    };
  },
  methods: {
    // 分页
    currentchange(e) {
      this.pagenum = e - 1,
        this.obtaincate();
    },
    // 添加类目
    open() {
      this.Message_Box.MesssageBoxQuestion("请输入类目", true)
        .then(({ value }) => {
          if (value == null) this.Message_Box.MessageWarning("输入不能为空");
          this.addcate(value);
        })
        .catch(() => {
          this.Message_Box.MessageInfo("取消输入");
        });
    },
    // 添加类目请求接口
    async addcate(category) {
      const loading = this.$loading({
        lock: true,
        text: "正在拼命添加中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let obj = { category };
      try {
        let res = await new this.request(
          this.URL.m().menucategory,
          JSON.stringify(obj)
        ).POST();
        if (res.status != 200) {
          this.Message_Box.MessageWarning(res.data.msg);
        } else {
          this.Message_Box.MessageSuccess(res.data.msg);
          this.currentnum = 1;
          this.obtaincate();
        }
      } catch (error) {
        this.Message_Box.MessageError("服务器发生错误，请重新尝试");
      }
      loading.close();
    },
    // 获取菜品类目信息
    async obtaincate() {
      const loading = this.$loading({
        lock: true,
        text: "正在拼命添加中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      try {
        let res = await new this.request(
          this.URL.m().dishesacquire + "?page=" + this.pagenum).GET();
       
        this.nodatas = res.data.data.Total == 0 ? false : true;
       
        this.tabcont = res.data.data.result
       
        this.total = res.data.data.Total
      } catch (error) {
        
      }
      loading.close()
    },
  },
  created() {
    this.obtaincate()
  }
};
</script> -->
<!-- 
<style lang="less" scoped>
.box {
  position: relative;
  padding: 0 9.6% 0;
  width: 100%;
  z-index: -1;
  background-color: #f6f8f9;
}

.box span {
  padding-top: 10px;
  font-weight: 700;
  display: block;
  font-size: 18px;
}

.box .buttom {
  width: 1000px;
  height: 120px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.box .buttom button {
  width: 120px;
  height: 40px;
}

.subject {
  width: 1000px;
  background-color: #ffffff;
}

.subject .header {
  width: 100%;
  height: 75px;
  line-height: 40px;
  padding: 0 65px;
  display: flex;
  justify-content: space-between;
}

.subject .header span {
  font-size: 18px;
  font-weight: 500;
}
.non-vegetable{
  font-weight: 600;
  font-size: 18px;
  text-align: center;
}
.table {
  padding: 0 30px;
  display: flex;
  height: 40px;
  line-height: 40px;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
}

.el-pagination {
  text-align: center;
  margin-top: 40px;
  white-space: nowrap;
  color: #303133;
  font-weight: 700;
}
</style> -->



<template>
  <div class="ordering" v-loading.fullscreen.lock="loading">
    <div class="heading">菜品类目</div>
    <div class="content-view">
      <div class="button-view">
        <el-button type="success" size="medium" @click="open">添加类目</el-button>
      </div>
      <div v-if="nodatas">
        <!-- 表头 -->
        <div class="tab-list">
          <span v-for="(item, index) in tablist" :key="index">{{ item }}</span>
        </div>
        <!-- 表格 -->
        <div class="tab-table" v-for="(item, index) in tabcont" :key="index">
          <div>{{ item.cid }}</div>
          <div>{{ item.label }}</div>
        </div>
        <!-- 分页 -->
        <!-- <div class="non-vegetable" v-else>还没有菜品哦！</div> -->
        <!-- 分页 -->
        <!-- current-page 当前页数，支持 .sync 修饰符 -->
        <!-- layout 组件布局，子组件名用逗号分隔 -->
        <!-- hide-on-single-page 只有一页时是否隐藏	 -->
        <!-- background  是否为分页按钮添加背景色	 -->
        <!-- total 总条目数	 -->
        <!-- current-change:currentPage 改变时会触发	 -->
        <el-pagination background layout="prev, pager, next" :total="total" :current-page="currentnum"
          :hide-on-single-page="true" @current-change="currentchange">
        </el-pagination>
      </div>
      <!-- 没有数据 -->
      <div class="nodatas" v-if="!nodatas">还没有菜品类目</div>
    </div>
    <div style="height: 120px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      nodatas: true,
      tablist: ['类目ID', '类目'],
      tabcont: [],
      currentnum: 1,//当前页数
      total: 0,//总条数
      pagenum: 0,
    }
  },
  methods: {
    // 分页
    currentchange(e) {
      this.pagenum = e - 1
      this.obtaincate()
    },
    // 添加类目
    open() {
      console.log(this.total);
      this.Message_Box.MesssageBoxQuestion("请输入类目", true)
        .then(({ value }) => {
          if (value == null) this.Message_Box.MessageWarning("输入不能为空");
          this.addcate(value);
        })
        .catch(() => {
          this.Message_Box.MessageInfo("取消输入");
        });
    },
    // 添加类目请求接口
    async addcate(category) {
      let obj = { category }
      try {
        let res = await new this.request(this.URL.m().menucategory, JSON.stringify(obj)).POST();
        if (res.status != 200) {
          this.Message_Box.MessageWarning(res.data.msg);
        } else {
          this.Message_Box.MessageSuccess(res.data.msg);
          this.currentnum = 1
          this.pagenum = 0
          this.obtaincate()
        }
      } catch (e) {
        this.Message_Box.MessageError("服务器发生错误，请重新尝试");
      }
    },
    // 获取菜品类目
    async obtaincate() {
      try {
        let res = await new this.request(this.URL.m().dishesacquire + "?page=" + this.pagenum).GET();
        // 是否有菜品
        this.nodatas = res.data.data.tatal == 0 ? false : true
        // 获取具体数据，循环遍历
        this.tabcont = res.data.data.result
        // 获取总页数
        this.total = res.data.data.Total
      } catch (e) {
        this.Message_Box.MessageError("服务器发生错误，请重新尝试");
      }
      this.loading = false
    }
  },
  created() {
    this.obtaincate()
  }
}
</script>

<style scoped="scoped">
@import url("@/assets/style/pubiss.css");

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #00be06;
  color: #fff;
}

/* 分页 */
.el-pagination {
  text-align: center;
  margin: 30px 0;
}
</style>
